<template>
  <NuxtLayout name="navigation">
    <RightToLeft :margin-top="10">
      <template #left>
        <Card class="site">
          <template #title>
            <div style="display: flex">
              <el-icon color="#409EFC">
                <Document/>
              </el-icon>
              &nbsp;站点介绍
            </div>
          </template>
          <el-row class="site-content text-center">
            <el-col :span="24">
              <Image :size="100"
                     round
                     class="img"
                     :src="site.siteIcon"
                     :preview-src-list="[(site.siteIcon)]"
              />
            </el-col>
            <el-col :span="24">
              <h1 class="fs-18">{{ site.siteName }}</h1>
            </el-col>
            <el-col class="isFlex mg-t-10 mg-b-10" :span="24">
              <el-tooltip effect="dark" content="浏览量" placement="top">
                <el-button type="info" :icon="View" size="small">{{ site.siteViews }}</el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="收藏" placement="top" v-if="!isCollect">
                <el-button @click="collect(site.id)" type="warning" :icon="Star" size="small">
                  {{ site.siteCollection }}
                </el-button>
              </el-tooltip>
              <el-popconfirm @confirm="cancelCollection(site.id)"
                             title="确定取消收藏吗？"
                             :icon="WarningFilled"
                             icon-color="red"
                             width="170"
                             confirm-button-text="确定"
                             cancel-button-text="取消"
                             v-if="isCollect"
              >
                <template #reference>
                  <el-button style="margin-left: 10px;" type="danger" :icon="StarFilled" size="small">
                    {{ site.siteCollection }}
                  </el-button>
                </template>
              </el-popconfirm>
            </el-col>
            <el-col :span="24">
              <p class="fs-14 text-line-height">{{ site.siteDetails }}</p>
            </el-col>
            <el-col class="mg-t-10 mg-b-10" :span="24">
              <el-tooltip effect="dark"
                          :content="item.tagName"
                          placement="top"
                          v-for="(item,index) in tagList"
                          :key="index"
              >
                <nuxt-link :class="'site-tag ' + tagClass[index]" :to="'/classify/all?tag=' + item.id">
                  {{ item.tagName }}
                </nuxt-link>
              </el-tooltip>
            </el-col>
            <el-col :span="24">
              <div class="fs-14">
                链接：
                <client-only>
                  <nuxt-link class="f-blue-color" :to="`//${site.siteUrl}`" target="_blank">
                    {{ site.siteUrl }}
                  </nuxt-link>
                </client-only>
                &nbsp;
                <el-tooltip effect="dark" content="复制" placement="top">
                  <el-icon class="pointer" color="#409EFC" @click="copy('//' + site.siteUrl)">
                    <DocumentCopy/>
                  </el-icon>
                </el-tooltip>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="fs-14">
                更新时间：{{ site.updateTime }}
              </div>
            </el-col>
          </el-row>
        </Card>
        <Card margin="10px 0 0">
          <template #title>
            <div class="isFlex">
              <el-icon color="#409EFC">
                <ChatLineRound/>
              </el-icon>
              &nbsp;评论列表
            </div>
          </template>
          <ReplyComments v-if="site.id != null" :site-id="site.id" @commentAfter="commentAfter"/>
          <Comments v-if="site.id != null" :site-id="site.id" ref="commentsRef"/>
        </Card>
      </template>
      <template #right>
        <Card class="sm-margin-top-10 xs-margin-top-10" title="相关站点">
          <Site v-if="site.classifyId" :classify="site.classifyId" :size="5" :col-number="1" random/>
        </Card>
      </template>
    </RightToLeft>
  </NuxtLayout>
</template>

<script setup lang="ts">
import {ChatLineRound, Document, DocumentCopy, Star, StarFilled, View, WarningFilled} from "@element-plus/icons-vue";
import {Response} from "@/entity/response";
import {Site as SiteEnt} from "@/entity/site";
import ReplyComments from "~/components/Comments/replyComments.vue";

const {loginStatus} = useStoreToRefs(useStores.user());
const {setting} = useStoreToRefs(useStores.setting());
const {ModalUtils} = useUtils();
const {siteApi} = useApi();
const id = ref<string>('');
const site = ref<SiteEnt>({});
const route = useRoute();
const isCollect = ref(false);
const tagList = ref([]);
const tagClass = ref(["tag-gray", "tag-red", "tag-red-2", "tag-yellow", "tag-yellow-2", "tag-blue", "tag-blue-2", "tag-cyan", "tag-green", "tag-green-2", "tag-purple", "tag-purple-2"]);
const commentsRef = ref();
onBeforeMount(() => {
  route.params.id && (id.value = route.params.id.toString());
  getSite();
});
const commentAfter = () => {
  commentsRef.value.getComments();
}
const getSite = () => {
  siteApi.get(id.value).then((res: any) => {
    let {code, data}: Response = res;
    if (code === 200) {
      tagClass.value = shuffle(tagClass.value);
      site.value = data;
      tagList.value = data.tagList;
      if (loginStatus.value) {
        checkCollect();
      }
      useHead({
        title: site.value.siteName + setting.value?.seoSeparate + '站点详情' + setting.value?.seoSeparate + setting.value?.name,
        meta: [
          {name: 'description', content: setting.value?.seoDescription},
          {name: 'keywords', content: setting.value?.seoKeywords.join(",") + "," + site.value.siteName}
        ]
      });
    } else {
      useHead({
        title: '站点不存在 - 404',
        meta: [
          {name: 'description', content: setting.value?.seoDescription},
          {name: 'keywords', content: setting.value?.seoKeywords.join(",")}
        ]
      });
    }
  });
};
const checkCollect = () => {
  siteApi.checkCollect(id.value).then((res: any) => {
    let {code, data}: Response = res;
    if (code === 200) {
      isCollect.value = data;
    }
  });
};
const collect = (id: string) => {
  siteApi.collect(id).then((res: any) => {
    let {code}: Response = res;
    if (code === 200) {
      ModalUtils.msgSuccess('收藏成功');
      getSite();
    }
  });
};
const cancelCollection = (id: string) => {
  siteApi.unCollect(id).then((res: any) => {
    let {code}: Response = res;
    if (code === 200) {
      ModalUtils.msgSuccess('取消收藏成功');
      getSite();
    }
  });
};
const copy = (content: string) => {
  const ele = document.createElement('input');
  ele.setAttribute('value', content);
  document.body.appendChild(ele);
  ele.select();
  document.execCommand('copy');
  document.body.removeChild(ele);
  ModalUtils.msgSuccess('复制成功');
}
const shuffle = (arr: any[]) => {
  let i = arr.length;
  while (i) {
    let j = Math.floor(Math.random() * i--);
    [arr[j], arr[i]] = [arr[i], arr[j]];
  }
  return arr;
};
</script>

<style scoped lang="scss">
.site {
  .site-content {
    line-height: 30px;

    & > div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .site-tag {
    border-radius: 15px;
    display: inline-block;
    font-size: 12px;
    margin-right: 5px;
    padding: 5px 8px;
    text-align: center;
    width: auto;
    height: 20px;
    line-height: 20px;
  }
}

::v-deep(.el-form-item:last-child) {
  margin-bottom: 0;
}
</style>